import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { addInsureIndustry, editInsureIndustry } from '@/api/insureIndustry'
import type { AddType } from '@/api/types'
import type { InsureIndustryListDto } from '@/api/insureIndustry/types'
import { getInsureCompanyPlans } from '@/api/insureEnsurePlan'
import { format } from 'echarts'
import { addPlanNumber, editPlanNumber } from '@/api/insureCompanyPlan'
import type { InsureCompanyPlanDetailDto, InsureCompanyPlanNumberDto } from '@/api/insureCompanyPlan/types'
@Component
export class DialogEditPlanNumber extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop() addType!: AddType
    @Prop() planNumberData?: InsureIndustryListDto
    @Prop() insureCompanyId!: number
    @Prop() detailData!: InsureCompanyPlanNumberDto

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.formConfig.show = this.show
        if (this.show && this.addType === 'edit') {
            initModelValue(this.formConfig, {
                ...this.detailData,
                insureNumber: this.detailData?.insureNumbers ? this.detailData?.insureNumbers.split(';') : []
            })
        }
        this.formConfig.title = this.addType === 'edit' ? '编辑保单号' : '新增保单号' + this.insureCompanyId
    }

    formConfig = this.initFormConfig() as FormModalDto

    initFormConfig() {
        return {
            title: '新增保单号',
            width: '450px',
            theme: 'dark',
            show: false,
            params: {
                confirmText: '确定'
            },
            items: {
                insureCompanyPlanId: {
                    name: '保司方案',
                    required: true,
                    element: 'select',
                    optionsType: 'insurePlanList',
                },
                insureNumber: {
                    name: '保单号',
                    element: 'inputs',
                    required: true,
                    placeholder: '请输入保单号',
                    params: {
                        minNum: 1,
                    },
                },
                effectTime: {
                    name: '生效月份',
                    required: true,
                    element: 'datetime',
                    params: {
                        type: 'month',
                        valueFormat: 'YYYY-MM',
                        format: 'YYYY-MM'
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)

                if (this.addType === 'add') {
                    await addPlanNumber({
                        ...data,
                        insureCompanyId: this.insureCompanyId
                    })
                } else {
                    await editPlanNumber({
                        ...data,
                        insureCompanyId: this.insureCompanyId,
                        id: this.detailData.id
                    })
                }
                this.handleRefresh()
                this.handleClose()
            },
            cancel: () => {
                this.handleClose()
            },
            init: async () => {
                console.log(1234, this.insureCompanyId)
                if (this.insureCompanyId) {
                    this.formConfig.items.insureCompanyPlanId.options = (await getInsureCompanyPlans({
                        insureCompanyId: this.insureCompanyId
                    })).map(item => ({
                        label: item.key,
                        value: item.value
                    }))
                }
            }
        } as FormModalDto
    }

    handleClose() {
        this.formConfig.show = false
        this.showChange(false)
        initModelValue(this.formConfig, {})
    }

    render() {
        return <>{renderModal(this.formConfig)}</>
    }
}

export default toNative<
    { addType: AddType; planNumberData?: InsureIndustryListDto, insureCompanyId: number, detailData?: InsureCompanyPlanNumberDto

     },
    { refresh: () => void }
        >(DialogEditPlanNumber)
